<template>
  <div>
     <el-row :gutter="20" :class="$style.header">
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">ID：</span>
        <el-input v-model="id" placeholder="请输入用户ID" style="width:55%" @keyup.enter.native="handleSearch"></el-input>
      </el-col>
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">说明：</span>
        <el-input v-model="terms.explain" placeholder="请输入说明" style="width:55%" @keyup.enter.native="handleSearch"></el-input>
      </el-col>
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">日期：</span>
        <el-date-picker v-model="terms.timeDur" type="daterange" style="width:55%" placeholder="选择日期范围">
        </el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" style="width:25%;" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row>
    <el-table :data="capital" border style="width: 100%">
      <el-table-column v-for="(item,index) in capitalTit" :key="index" :prop="item.prop" :label="item.label" :min-width="item.width">

      </el-table-column>
    </el-table>
    <div style="margin: 30px 0;">
      <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { dateFormat } from 'vux'
export default {
  data() {
    return {
      id: this.$route.params.id,
      terms:{
        explain:'',
        timeDur:'',
      },
      capitalTit: [
        {
          prop: 'id',
          label: '编号',
          width: '100'
        },
        {
          prop: 'fuid',
          label: '用户id',
          width: '100'
        },
        {
          prop: 'cname',
          label: '用户姓名',
          width: '100'
        },
        {
          prop: 'cSm',
          label: '奖励说明',
          width: '100'
        },
        {
          prop: 'fjlje',
          label: '奖励金额',
          width: '100'
        },
        {
          prop: 'fkzcje',
          label: '剩余金额',
          width: '100'
        },
        {
          prop: 'tdate',
          label: '发放时间',
          width: '100'
        },
      ],
      capital: [],
      total: 0,
      pageSize: 20,
    }
  },
  methods: {
    handleSearch(){
      this.getTableDate(1)
    },
    handleCurrentChange(val) {
      this.getTableDate(val)
    },
    getTableDate(page = 1) {
      this.$get(this, {
        api: 'member/jljl.do', data: {
          fuid: this.id,
          sm: this.terms.explain,
          st: this.terms.timeDur && dateFormat(this.terms.timeDur[0], 'YYYY-MM-DD'),
          et: this.terms.timeDur && dateFormat(this.terms.timeDur[1], 'YYYY-MM-DD'),
          pageSize: this.pageSize,
          page
        }
      }).then(({ data }) => {
        if (data.state === 0) {
          this.total = data.content.num;
          this.capital = data.content.data
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    }
  },
  mounted() {
    this.getTableDate(1);
  }
}
</script>

<style lang="scss" module>
.header {
  font-size: 14px;
  padding-bottom: 20px;
}
</style>


